<template>
    <div style="display: flex;justify-content: space-between;align-items: center;">
        <div>
            <h1 class="title">问卷列表</h1>
        </div>
        <div>
            <el-button type="primary"  @click="() => { this.$router.push('/createQN') }">
                <el-icon>
                    <Plus />
                </el-icon>
                创建</el-button>
        </div>
    </div>
    <div>
        <el-table  table-layout='auto'       highlight-current-row
            :data="qnList.slice((pagination.curPage - 1) * pagination.pageSize, pagination.curPage * pagination.pageSize)"
            border style="width: 100%">
            <el-table-column prop="id" label="ID" width="90" />
            <el-table-column prop="title" label="标题" />
            <el-table-column prop="type" label="类型" width="180" />
            <el-table-column label="问题数量" width="120">
                <template #default="scope">
                    {{ scope.row.questionList.length }}
                </template>
            </el-table-column>
            <el-table-column label="问题类型">
                <template #default="scope">
                    {{ [...new Set(scope.row.questionList.map((i) => { return i.typeCN }))].join(',') }}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
                <template #default="scope">
                    <el-button type="primary" text size="small"
                        @click="() => { this.$router.push(`/createQN/${scope.row.id}`) }">编辑</el-button>
                    <el-button type="primary" text size="small"
                        @click="() => { this.$router.push(`/doQN/${scope.row.id}`) }">预览</el-button>
                    <el-popconfirm confirm-button-text="确认"  cancel-button-text="取消" width="200" title="删除后无法恢复，是否确认删除?" @confirm="deleteQNByID(scope.row)">
                        <template #reference>
                            <el-button type="danger" text size="small">删除</el-button>
                        </template>
                    </el-popconfirm>

                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="pagination">
        <el-pagination v-model:current-page="pagination.curPage" v-model:page-size="pagination.pageSize"
            :page-sizes="[10, 25, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="qnList.length" />
    </div>
</template>
<script>

import { useUserStore } from "../../store/userStore.js";
import { POST } from '../../util/axios.js'
export default {
    data() {
        return {
            qnList: [],
            pagination: {
                curPage: 1,
                pageSize: 10
            }
        }
    },
    methods: {
        async getQNList() {
            const userStore = useUserStore();
            let rs = await POST('/questionnaire/getQNListByUser', 'POST', userStore.userInfo, false, null, false)
            this.qnList = rs.data
            console.log("获取用户自己创建的问卷结果:::", rs)
        },
        async deleteQNByID(qn) {
            let rs = await POST('/questionnaire/deleteQNByID', 'POST', qn, true, null, true)
            // this.qnList = rs.data
            console.log("删除用户自己创建的问卷结果:::", rs)
            if (rs.code == 200) {
                location.reload();
            }

        }
    },
    mounted() {
        this.getQNList()
    }
}
</script>
<style></style>